<template>
  <div class="sub-header-wrap">
    <a-layout-header
      :class="{
        'sub-header__horizontal': isShowHorizontalMenu,
        'sub-header__interrelation': isInterrelationMode,
        'sub-header': true,
      }"
    >
      <div class="sub-header__logo">
        <slot name="logo"></slot>
      </div>
      <div
        v-if="isInlineMode"
        class="sub-header__iconbox"
        @click="toggleSideBar"
      >
        <a-icon
          v-if="isShowTriggerIcon"
          class="sub-header__trigger"
          :type="isSideBarCollapse ? 'menu-unfold' : 'menu-fold'"
        >
        </a-icon>
      </div>
      <slot name="header-suffix"></slot>
      <ioc-user></ioc-user>
      <entry></entry>
    </a-layout-header>
    <horizontal-menu
      v-if="isShowHorizontalMenu && isHasSidebarMenu"
      mode="horizontal"
      theme="light"
      class="secondary sub-header__secondary"
      @sidebar-selected="onSidebarSelected"
    />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import IocUser from '../ioc-user/_base'
import HorizontalMenu from '../ioc-sidebar/_base'
import Entry from './entry'

export default {
  name: 'IocHeader',
  components: {
    IocUser,
    Entry,
    HorizontalMenu
  },
  computed: {
    ...mapState('global', {
      isSideBarCollapse: 'isSideBarCollapse',
      selectedSideBarTitle: 'selectedSideBarTitle',
      menuMode: 'menuMode',
      sideBarConfig: 'sideBarConfig',
      isShowSideBar: 'isShowSideBar'
    }),
    isShowTriggerIcon() {
      return this.menuMode === 'inline' && this.isShowSideBar !== false
    },
    isShowHorizontalMenu() {
      return this.menuMode === 'horizontal'
    },
    isInlineMode() {
      return this.menuMode === 'inline'
    },
    isInterrelationMode() {
      return this.menuMode === 'interrelation'
    },
    isHasSidebarMenu() {
      return this.sideBarConfig.length
    }
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch(this.$storeGlobalTypes.TOGGLE_SIDE_BAR)
    },
    onSidebarSelected(e, next) {
      console.log(e, next)
      this.$emit('sidebar-selected', e, next)
    }
  }
}
</script>
<style lang="scss">
.sub-header {
  background-color: #1d1f24 !important;
  height: 56px !important;
}
</style>
<style lang="scss" scoped src="./index.scss"></style>
